<template>
  <div>
    <div>
      <h5>注册用户信息</h5>
      <div style="padding: 8px">
        <span class="tiy_key">姓名:</span> <span>{{status.allotModal.userInfo.fullName}}</span>
        <span class="tiy_key">邮箱:</span> <span>{{status.allotModal.userInfo.contactEmail===null?'暂无':status.allotModal.userInfo.contactEmail}}</span>
        <span class="tiy_key">邀请码:</span> <span>{{status.allotModal.userInfo.inviteCode===''?'暂无':status.allotModal.userInfo.inviteCode}}</span>
      </div>
    </div>
    <hr>
    <div v-show="tData.allotUserList.length>0">
      <h5>匹配的目标用户</h5>
      <span class="tiy_key">表格中与目标用户相互匹配的条件将会以<span style="color: green"> 绿色 </span>标记出来.</span>
      <!--表格和分页-->
      <Table border :columns="matchTableTitles"
             :data="tData.allotUserList" style="margin-top: 8px"
             no-data-text="无匹配数据"></Table>
    </div>
    <div v-show="tData.allotUserList.length<=0">
      <Alert show-icon type="warning">系统未检测到任何匹配条件.</Alert>
      当前页面暂时仅能将注册用户与目标用户进行一对一关联并同时会将该注册用户分配给目标用户所属的负责人.<br>
      如果您想将该注册用户直接分配给某个负责人(不计入引流统计信息中),请去'公众用户管理'中,手动为该用户补充对应负责人的邀请码,保存后系统将自动识别和分配.
    </div>
    <div slot="footer" v-show="!status.allotModal.userInfo.isMatched">
      <!-- 图片 -->
      <Modal
        v-model="status.modalImage.isShow"
        title=""
        :styles="{align:'center'}"
        :scrollable=true>
        <div slot="footer"></div>
        <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
      </Modal>
    </div>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/userMatchCustomer/user_match_customer_data";
  import { userToTargetCustomer } from "./js/userMatchCustomer/user_match_customer_funs";

  export default {
    name: "UserMatchCustomer",
    components: {ICol},

    data() {
      return {
        status: tiyData.tStatus,
        //字典 推广客户状态
        targetCustomerStateDict: this.$store.getters.dictionaries.targetCustomerStateDict,
        tData: tiyData.tData,
        matchTableTitles: tiyData.matchTableTitles(this)
      }
    },
    computed: {
    },

    methods: {
      switchExpand() {
        this.$store.commit('setUIExpanded', !this.isExpanded);
      },
      userToTargetCustomer(index) {
        userToTargetCustomer(this, tiyData, index, this.$parent.$parent.refreshList);
      },
      isMatchValue(type, value) {
        let isMatch = type == 1 ? this.compareTextValue(tiyData.tStatus.allotModal.userInfo.fullName, value) : this.compareTextValue(tiyData.tStatus.allotModal.userInfo.contactEmail, value);
        return isMatch ? <div style="color:green">{value}</div> : <div>******</div>;
      },
      compareTextValue(text1, text2) { //比较两个文本是否相同。匹配规则：移除空格，忽略大小写
        if (!text1 || !text2) {
          return false;
        }
        if (text1.replace(/\s+/g, "").toLowerCase() === text2.replace(/\s+/g, "").toLowerCase()) {
          return true;
        }
        return false;
      },
      isUserMatchedView(index) {
        let matchedUserId = tiyData.tData.allotUserList[index].userId;
        if (matchedUserId) {
          return <div>已分配给{tiyData.tData.allotUserList[index].userName}的负责人</div>;
        }else {
          return <i-button type="primary" size="small" onClick={() => {
            this.userToTargetCustomer(index);
          }}>分配给该目标用户的负责人</i-button>;
        }
      }
    },
    mounted() {
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }
</style>
